<template>
	<view class="ship-reback">
		<p class="page-title">
			<navigator class="backIcon" url="/pages/home/index">
				<uv-icon color="#fff" name="arrow-left" size="22" width="20" />
			</navigator>
			车船·交通
		</p>
	</view>
	<view class="round-content round-content-reback">
		<view class="ship-inner">
			<uv-tabs :list="lineList" style="align-items: center;" @click="" type="card">
			</uv-tabs>
			<view class="tabs-box">
				<view class="line-choose">
					<p>{{nowLine.departName}}</p>
					<uv-icon size="25" @click="switchover()" name="/static/traffic/icon/single.png"></uv-icon>
					<p>{{nowLine.arrivalName}}</p>
				</view>
				<uv-line style="margin-left: 5%;" length="90%"></uv-line>
				<view @click="openDate()" class="date-choose">
					<p>{{selectDate.month}}月{{selectDate.date}}日 <span> {{selectDate.text}}</span></p>
				</view>
			</view>
			<uv-button text="查询" shape="circle" @click="searchLine()" type="primary"
				style="width: 80%;margin-left: 10%; padding: .9rem 0.5rem;">
			</uv-button>
		</view>
	</view>

	<view class="tips round-content" style="margin-top: 16rpx;">
		<uv-notice-bar :text="noticeText" :url="noticeUrl" direction="column" speed="250" mode="link"
			customStyle="border-radius: 25rpx;" linkType="navigateTo" :disableTouch="false" bgColor="#fff" color="#000"
			icon="/static/icon/notice.png">
		</uv-notice-bar>
	</view>

	<view class="recommend-box">
		<view class="trapezoid-head">
			<view class="title">玩转本地</view>
			<uv-button style="padding-top: 20rpx;width: 60px;" customTextStyle="font-size: 24rpx" size="mini"
				color="linear-gradient(to bottom, rgb(254, 214, 177), rgb(239, 154, 103))" type="error"
				text="查看更多"></uv-button>
		</view>
		<uv-tabs :activeStyle="{
			color: '#f29459',
			transform: 'scale(1.05)'
    	}" :inactiveStyle="{
			color: '#283034',
			transform: 'scale(1)'
		}" itemStyle="height: 46rpx;border-right: solid 1px #bedee6;" lineHeight="0" :list="likeList"></uv-tabs>
		<view style="margin-top: 20rpx;">
			<uv-scroll-list>
				<view v-for="(item, index) in localList" :key="index">
					<image :src="item.image" mode="heightFix" style="height: 170rpx;padding: 10rpx 18rpx;"></image>
					<p style="padding: 5rpx 18rpx;font-weight: 600;">{{ item.place }}</p>
					<p style="padding: 5rpx 18rpx;font-size: 30rpx;color: #666666;">门票 <span
							style="color: #ff9554;">￥{{ item.price }}</span>起</p>
				</view>
			</uv-scroll-list>
		</view>
	</view>

	<view style="display: flex;align-items: center;
		margin-top: 20rpx;">
		<view class="content-search">
			<uv-search searchIcon="map-fill" searchIconColor="#52cbfc" label="北海出发" bgColor="#fff"
				placeholder="北海出发 目的地/关键词" shape="square" :showAction="true"></uv-search>
		</view>
		<view class="ranking-icon">
			<uv-icon size="20" name="/static/icon/billboard.png"></uv-icon>
			<p style="font-size: 20rpx;color: #d7a26f;">榜单</p>
		</view>
	</view>

	<view style="margin: 10px 1rem;">
		<uv-tabs :activeStyle="{
			color: '#52c4fe',
			transform: 'scale(1.05)'
		}" :inactiveStyle="{
			color: '#283034',
			transform: 'scale(1)'
		}" itemStyle="height: 46rpx;border-right: solid 1px #bedee6;font-size: 20rpx;" lineHeight="0"
			:list="goodsCategory"></uv-tabs>

		<view style="margin-top: 1rem;">
			<uv-drop-down text-size="20rpx" text-active-size="20rpx"
				:extra-icon="{name: 'arrow-down', size: '20rpx', color: '#333'}"
				:extra-active-icon="{name: 'arrow-up', size: '20rpx', color: '#3c9cff'}"
				style="background-color: transparent;" ref="dropDown" sign="trafficIndexDropDown"
				:defaultValue="[0,0,'all']" custom-style="background-color: #f1f3f8">
				<uv-drop-down-item class="drop-down-item" name="type" type="2" label="全部分类" value="all">
				</uv-drop-down-item>
				<uv-drop-down-item class="drop-down-item" name="order" type="2" label="智能排序" :value="0">
				</uv-drop-down-item>
				<uv-drop-down-item class="drop-down-item" name="filter" type="2" label='筛选' :value="0">
				</uv-drop-down-item>
			</uv-drop-down>
			<uv-drop-down-popup sign="trafficIndexDropDown" @popupChange="change">
				<view style="width: 100%;height: 300rpx;background-color: #fff;">

				</view>
			</uv-drop-down-popup>
		</view>
		<xinren>
		</xinren>
		<view style="font-size: 25rpx;margin-top: 5rpx;">
			<uv-grid :border="false" :col="2" style="width: 100%;">
				<uv-grid-item v-for="(item,index) in baseList" :key="index">
					<view class="goods-container">
						<span class="goods-tip">游玩</span>
						<uv-image radius="20rpx" width="100%" height="300rpx" mode="aspectFill" :lazyLoad="true"
							src="/static/home/bg/zhuli.png" class="goods_imgs"></uv-image>
						<span class="place-tip"><uv-icon color="#fff" name="map-fill"></uv-icon>涠洲岛</span>
						<view class="goods-content">
							<p class="goods-title">涠洲岛火山国家地址公园</p>
							<p style="color: #60b3df;">25125人对这篇文章感兴趣</p>
							<p style="display: flex;margin: 16rpx 0 24rpx 0;">
								<uv-avatar size="36rpx" src shape="circle"></uv-avatar>
								<span style="font-size: 20rpx;">周游世界</span>
							</p>
							<p style="display: flex;font-size: 15rpx;">
								<span style="margin-right: auto;display: flex;"><uv-icon size="24rpx"
										name="eye"></uv-icon>354</span>
								<span style="display: flex;"><uv-icon size="24rpx" name="heart"></uv-icon>345</span>
							</p>
						</view>
					</view>
				</uv-grid-item>
			</uv-grid>
		</view>
	</view>

	<uv-tabbar :value="value" @change="index=>value = index">
		<uv-tabbar-item text="首页">
			<template v-slot:active-icon>
				<image class="tabbar-icon" src="/static/icon/home-icon-active.png"></image>
			</template>
			<template v-slot:inactive-icon>
				<image class="tabbar-icon" src="/static/icon/home-icon-inactive.png"></image>
			</template>
		</uv-tabbar-item>
		<uv-tabbar-item text="收藏">
			<template v-slot:active-icon>
				<image class="tabbar-icon" src="/static/icon/collect-icon-active.png"></image>
			</template>
			<template v-slot:inactive-icon>
				<image class="tabbar-icon" src="/static/icon/collect-icon-inactive.png"></image>
			</template>
		</uv-tabbar-item>
		<uv-tabbar-item text="">
			<template v-slot:active-icon>
				<image class="plus-icon" src="/static/icon/plus-icon-active.png"></image>
			</template>
			<template v-slot:inactive-icon>
				<image class="plus-icon" src="/static/icon/plus-icon-inactive.png"></image>
			</template>
		</uv-tabbar-item>
		<uv-tabbar-item text="消息" badge="3">
			<template v-slot:active-icon>
				<image class="tabbar-icon" src="/static/icon/msg-icon-active.png"></image>
			</template>
			<template v-slot:inactive-icon>
				<image class="tabbar-icon" src="/static/icon/msg-icon-inactive.png"></image>
			</template>
		</uv-tabbar-item>
		<uv-tabbar-item text="我的">
			<template v-slot:active-icon>
				<image class="tabbar-icon" src="/static/icon/my-icon-active.png"></image>
			</template>
			<template v-slot:inactive-icon>
				<image class="tabbar-icon" src="/static/icon/my-icon-inactive.png"></image>
			</template>
		</uv-tabbar-item>
	</uv-tabbar>


	<uv-calendars :startDate="shipStartDate" :endDate="shipEndDate" ref="calendars" @confirm="confirmDate" />
</template>

<script>
	import xinren from "@/components/banner/xinren.vue"
	import {
		formatDate
	} from '@/common/public.js'
	import {
		getDateText
	} from '@/common/public.js'
	export default {
		data() {
			return {
				lineList: [{
					name: '北海涠洲航线',
				}, {
					name: '北海海口航线',
					disabled: true
				}],
				shipLineList: [],
				noticeText: ['uv-ui众多组件覆盖开发过程的各个需求', '组件功能丰富，多端兼容', '让您快速集成，开箱即用'],
				noticeUrl: [],
				// 表示value等于这些值，就属于默认值
				defaultValue: [0, 'all', '0'],
				// 筛选结果
				result: [{
					name: 'order',
					label: '最新发布',
					value: 'new'
				}],
				// { name: 'order', label: '最新发布', value: 'new' }
				activeName: 'order',
				order: {
					label: '全部分类',
					value: 'all',
					activeIndex: 0,
					color: '#333',
					activeColor: '#2878ff',
					child: [{
						label: '综合排序',
						value: 'all'
					}, {
						label: '最新发布',
						value: 'new'
					}, {
						label: '低价优先',
						value: 'money'
					}]
				},
				type: {
					label: '智能排序',
					value: 'all',
					activeIndex: 0,
					color: '#333',
					activeColor: '#2878ff',
					child: [{
						label: '全部',
						value: 'all'
					}, {
						label: 'PDF',
						value: 'pdf'
					}, {
						label: 'WROD',
						value: 'word'
					}, {
						label: 'PPT',
						value: 'ppt'
					}]
				},
				vip_type: {
					label: '筛选',
					value: 0,
					activeIndex: 0
				},
				likeList: [{
					name: '景点周边',
				}, {
					name: '美食',
				}, {
					name: '酒店民宿'
				}, {
					name: '旅游'
				}, {
					name: '特产超市'
				}, {
					name: '娱乐'
				}],
				goodsCategory: [{
					name: '推荐',
				}, {
					name: '船票游轮',
				}, {
					name: '接送/包车',
				}, {
					name: '租车自驾',
				}],
				localList: [{
					place: '涠洲岛',
					price: '230.5',
					image: '/static/home/bg/qiandao.png'
				}, {
					place: '涠洲岛',
					price: '230.5',
					image: '/static/home/bg/qiandao.png'
				}, {
					place: '涠洲岛',
					price: '230.5',
					image: '/static/home/bg/qiandao.png'
				}, {
					place: '涠洲岛',
					price: '230.5',
					image: '/static/home/bg/qiandao.png'
				}, {
					place: '涠洲岛',
					price: '230.5',
					image: '/static/home/bg/qiandao.png'
				}],
				timeData: {},
				baseList: [{
					name: 'photo',
					title: '李白'
				}, {
					name: 'lock',
					title: '韩信'
				}, {
					name: 'star',
					title: '刘备'
				}],
				value: '',
				max: {},
				nowLine: {
					id: 56,
					departName: '北海',
					arrivalName: '涠洲'
				},
				lineActive: 1,
				selectDate: {
					month: new Date().getMonth() + 1,
					date: new Date().getDate(),
					text: getDateText(formatDate(new Date()), true),
					fulldate: formatDate(new Date())
				},
				shipStartDate: formatDate(new Date()),
				shipEndDate: formatDate(new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() +
					16))
			}
		},
		components: {
			xinren
		},
		onLoad() {
			const app = getApp();
			this.initDefaultDate(app);
		},
		methods: {
			searchLine() {
				var that = this;
				uni.navigateTo({
					url: '/pages/traffic/shipLine?date=' + that.selectDate.fulldate + '&lineId=' + that.nowLine.id
				});
			},
			/**
			 * 点击每个筛选项回调
			 * @param {Object} e { name, active, type } = e
			 */
			selectMenu(e) {
				const {
					name,
					active,
					type
				} = e;
				this.activeName = name;
				// type 等于1 的需要特殊处理：type不等于1可以忽略
				if (type == 1) {
					this.clickItem({
						name: 'vip_type',
						label: 'VIP文档',
						value: e.active ? 1 : 0
					});
				} else {
					const find = this.result.find(item => item.name == this.activeName);
					if (find) {
						const findIndex = this[this.activeName].child.findIndex(item => item.label == find.label && item
							.value == find.value);
						this[this.activeName].activeIndex = findIndex;
					} else {
						this[this.activeName].activeIndex = 0;
					}
				}
			},
			/**
			 * 点击菜单回调处理
			 * @param {Object} item 选中项 { label,value } = e
			 */
			clickItem(e) {
				// 下面有重新赋值，所以用let
				let {
					label,
					value
				} = e;
				const findIndex = this.result.findIndex(item => item.name == this.activeName);
				if (this.defaultValue.indexOf(value) > -1 && this[this.activeName].label) {
					label = this[this.activeName].label;
				}
				// 已经存在筛选项
				if (findIndex > -1) {
					this.$set(this.result, findIndex, {
						name: this.activeName,
						label,
						value
					})
				} else {
					this.result.push({
						name: this.activeName,
						label,
						value
					});
				}
				this.result = this.result.filter(item => this.defaultValue.indexOf(item.value) == -1);
				uni.showModal({
					content: `筛选的值：${JSON.stringify(this.result)}`
				})
			},

			//初始化默认数据
			initDefaultDate(app) {
				var _this = this;
				// 去接口获取通知列表
				uni.request({
					url: app.globalData.API_BASE_URL + 'notice/getNotice',
					method: 'GET',
					data: {
						type_id: 5
					},
					success(res) {
						if (res.statusCode != 404) {
							_this.noticeText = res.data.data.title;
							_this.noticeUrl = res.data.data.url;
						}
					}
				});

				// 获取航线信息
				uni.request({
					url: app.globalData.API_BASE_URL + 'ship/getShipLine',
					method: 'GET',
					data: {
						FromCityName: _this.nowLine.departName,
						ToCityName: _this.nowLine.arrivalName
					},
					success(res) {
						if (res.statusCode === 200) {
							_this.shipLineList = res.data.data.shipline;
							_this.nowLine.id = res.data.data.shipline[0].lineId
						}
					}
				});

				// uni.request({
				// 	url: '/index/goods/data',
				// 	success(res) {
				// 		_this.goodsList = res.data;
				// 	}
				// });

				// uni.request({
				// 	url: '/index/index/goodstype_data3',
				// 	success(r) {
				// 		_this.tabList = r.data.data;
				// 	}
				// });
			},

			//切换航线
			switchover() {
				var that = this;
				let tempName = this.nowLine.departName;
				this.nowLine.departName = this.nowLine.arrivalName;
				this.nowLine.arrivalName = tempName;
			},

			//选择日期
			confirmDate(date) {
				this.dateShow = false;
				
				this.selectDate = date;
				this.selectDate.text = getDateText(date.fulldate, true);
			},

			/*打开日期选择*/
			openDate() {
				this.$refs.calendars.open();
			},

			// 倒计时
			UvCountDown(e) {
				this.timeData = e
			},

			// 下拉筛选选择
			change(e) {
				console.log('弹窗打开状态：', e);
			}
		}
	}
</script>

<style scoped>
	page {
		background-color: #f1f3f8;
		height: 100%;
	}

	.ship-reback {
		height: 300rpx;
		background-image: url('/static/home/bg/bg-head.png');
	}

	.backIcon {
		float: left;
	}

	.page-title {
		text-align: center;
		color: #fff;
		padding-top: 100rpx;
	}

	.round-content-reback {
		margin-top: -16%;
	}

	.round-content {
		border-radius: 25rpx;
		background-color: #fff;
		width: 95%;
		margin-left: 2.5%;
	}

	.line-choose {
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		padding: 15rpx 10rpx;
		font-size: 40rpx;
	}

	.date-choose {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 15rpx 120rpx;
	}

	.recommend-box {
		margin-top: 40rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}

	.trapezoid-head {
		background:
			url("/static/bg/rounded-rectangle-title.png");
		background-size: contain;
		padding: 10px 10px;
		margin-top: -20rpx;
		display: flex;
		justify-content: space-between;
		background-repeat: no-repeat;
	}

	.title {
		font-weight: 800;
		font-size: 36rpx;
	}

	.content-search {
		width: 75%;
		padding-left: 2.5%;
		margin-right: auto;
	}

	.ranking-icon {
		background-color: #fff;
		margin-right: 2.5%;
		padding: 5rpx 8rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		width: 8%;
		height: 65rpx;
		border-radius: 15rpx;
	}

	.drop-down-item {
		background-color: #e7ebed;
		border-radius: 10px;
		height: 20px;
		padding: 0.2rem;
	}

	.time-item {
		color: #de3d24;
		background-color: #edbfba;
		padding: 0 5rpx;
		border-radius: 10rpx;
	}

	.goods-container {
		width: 98%;
		margin-top: 20rpx;
		text-align: left;
		background-color: #fff;
		border-radius: 20rpx;
	}

	.goods-tip {
		padding: 0 6rpx;
		background-color: white;
		border-radius: 15rpx;
		position: absolute;
		top: 28rpx;
		right: 14rpx;
		z-index: 5;
	}

	.place-tip {
		padding: 0 6rpx;
		background-color: rgb(43, 51, 57, 0.5);
		border-radius: 15rpx;
		position: absolute;
		top: 260rpx;
		left: 14rpx;
		z-index: 5;
		color: #fff;
		display: none;
	}

	.goods_imgs {
		width: 100%;
		/* height: 300rpx; */
	}

	.goods-content {
		padding: 20rpx;
	}

	.goods-title {
		font-weight: 600;
		font-size: 26rpx;
	}

	.plus-icon {
		width: 54rpx;
		height: 54rpx;
	}

	.tabbar-icon {
		width: 36rpx;
		height: 36rpx;
	}
</style>